<template>
  <div class="preview-wrapper">
    <HeaderComp></HeaderComp>
    <div class="map-wrapper">
      <CenterPanel></CenterPanel>
    </div>
  </div>
</template>

<script lang="ts" setup>
import HeaderComp from "./components/header/index.vue";
import CenterPanel from "../editor/components/center-panel/index.vue";
import { useRoute } from "vue-router";
import { useMapStore } from "@/store/map";
import { useEventBus } from "@vueuse/core";
const mapBus = useEventBus("map");
const mapStore = useMapStore();
const route = useRoute();
import { onMounted } from "vue";
onMounted(() => {
  const id = route.query.id as string;
  if (id) {
    mapStore.getOpenDatasetInfo(id).then((res) => {
      console.log(res);
      res.layers.forEach((layer) => {
        mapBus.emit({
          type: "render.layer",
          value: layer,
        });
      });
      mapBus.emit({
        type: "jumpTo",
        value: {
          center: res.location.coordinates,
          zoom: res.scale,
        },
      });
    });
  }
});
</script>

<style lang="scss" scoped>
.preview-wrapper {
  height: 100vh;
  .map-wrapper {
    height: calc(100vh - 61px);
  }
}
</style>
